@use "../mixins/function" as *;
@use "../mixins/config" as *;

html[code-block="#{$namespace}"] {
  // 因为 stroke 无法直接写 var(--vp-c-text-1)，所以只能写死 var(--vp-c-text-1) 的具体颜色，如果改动了 var(--vp-c-text-1) 的值，则需要修改 stroke 为对于的值
  &:root {
    /* clipboard */
    --vp-icon-copy: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='rgba(60,60,67,1)' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' viewBox='0 0 24 24'%3E%3Crect width='8' height='4' x='8' y='2' rx='1' ry='1'/%3E%3Cpath d='M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2'/%3E%3C/svg%3E");
    /* clipboard-copy */
    --vp-icon-copied: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='rgba(60,60,67,1)' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' viewBox='0 0 24 24'%3E%3Crect width='8' height='4' x='8' y='2' rx='1' ry='1'/%3E%3Cpath d='M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2'/%3E%3Cpath d='m9 14 2 2 4-4'/%3E%3C/svg%3E");
  }

  &:root.dark {
    /* clipboard */
    --vp-icon-copy: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='rgba(223,223,214,1)' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' viewBox='0 0 24 24'%3E%3Crect width='8' height='4' x='8' y='2' rx='1' ry='1'/%3E%3Cpath d='M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2'/%3E%3C/svg%3E");
    /* clipboard-copy */
    --vp-icon-copied: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='rgba(223,223,214,1)' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' viewBox='0 0 24 24'%3E%3Crect width='8' height='4' x='8' y='2' rx='1' ry='1'/%3E%3Cpath d='M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2'/%3E%3Cpath d='m9 14 2 2 4-4'/%3E%3C/svg%3E");
  }

  .vp-doc div[class*="language-"],
  .#{$namespace}-postItem__info__left__excerpt div[class*="language-"] {
    transition: height 0.3s;
    overflow: hidden;

    .vp-code {
      padding-top: getCssVar("code-block-fold-height");
    }

    .line-numbers-wrapper {
      margin-top: getCssVar("code-block-fold-height");
      padding-top: 0;
    }

    /* 代码块三个圆圈 */
    &::before {
      content: "";
      display: block;
      position: absolute;
      top: calc(getCssVar("code-block-fold-height") / 2);
      left: 14px;
      transform: translateY(-50%);
      width: 12px;
      height: 12px;
      border-radius: 50%;
      background: #fc625d;
      box-shadow:
        20px 0 #fdbc40,
        40px 0 #35cd4b;
    }

    /* 代码块语言 */
    span.lang {
      position: absolute;
      z-index: 3;
      top: calc(getCssVar("code-block-fold-height") / 2);
      left: 75px;
      transform: translateY(-50%);
      font-size: 18px;
      color: var(--vp-c-text-1);
      text-transform: getCssVar("code-block-lang-transform");
      font-weight: bold;
      width: fit-content;
    }

    /* 一键复制图标 */
    button.copy {
      width: 18px;
      height: 18px;
      position: absolute;
      top: calc(getCssVar("code-block-fold-height") / 2);
      right: 36px;
      transform: translateY(-50%);
      opacity: 1;
      background-size: 14px;
      background-color: transparent;
      border: none;
      color: var(--vp-c-text-1);
      fill: var(--vp-c-text-1);
      &:hover,
      .copied {
        background-color: transparent;
        border: none;
      }
    }

    /* 语言和一键复制图标不会消失 */
    &:hover button.copy + span.lang,
    button.copy:focus + span.lang,
    &:hover > button.copy,
    button.copy:focus {
      opacity: 1;
    }
  }

  /* 代码块箭头 */
  .code-arrow {
    cursor: pointer;
    position: absolute;
    z-index: 3;
    top: calc(getCssVar("code-block-fold-height") / 2);
    right: 14px;
    transform: translateY(-50%);
    transition: all 0.3s;
    user-select: none;

    svg {
      width: 16px;
      height: 16px;
      fill: var(--vp-c-text-1);
    }

    /* 代码块折叠后后旋转 -90 度 */
    &.fold {
      transform: rotate(90deg) translateX(-50%);
    }
  }
}
